{extend name="base"}
{block name="main"}
<div class="details">
    <div class="details_operation clearfix">
        <div class="bui_select">
            <input type="button" value="添&nbsp;&nbsp;加" class="add" onclick="add()">
        </div>
        <div class="fr">
            <div class="text">
                <span>商品价格：</span>
                <div class="bui_select">
                    <select id="" class="select" onchange="change(this.value)">
                    	<option>-请选择-</option>
                        <option value="iPrice asc" >由低到高</option>
                        <option value="iPrice desc">由高到底</option>
                    </select>
                </div>
            </div>
            <div class="text">
                <span>上架时间：</span>
                <div class="bui_select">
                 <select id="" class="select" onchange="change(this.value)">
                 	<option>-请选择-</option>
                        <option value="pubTime desc" >最新发布</option>
                        <option value="pubTime asc">历史发布</option>
                    </select>
                </div>
            </div>
            <div class="text">
                <span>搜索</span>
                <input type="text" value="" class="search"  id="search" onkeypress="search()" >
            </div>
        </div>
    </div>
    <!--表格-->
    <table class="table" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th width="10%">编号</th>
                <th width="20%">商品名称</th>
                <th width="50%">商品图片</th>
                <th width="20%">操作</th>
            </tr>
        </thead>
        <tbody>
	        {volist name="list" id="vo"}
	            <tr>
	                <td>
	                	<input type="checkbox" id="check{$vo.id}" class="check" value="{$vo.id}">
	                	<label for="check{$vo.id}" class="label">{$vo.id}</label>
	                	</td>
	                <td>{$vo.gName}</td>
					<td>
            			{volist name="vo.image" id="image"}
            			<img width="100" height="100" src="/uploads/picture/goods/{$image.imagePath}" alt=""/> &nbsp;&nbsp;
            			{/volist}
		             </td>
		             <td>
		             	<input type="button" value="添加文字水印" onclick="showDetail('{$vo.id}', '0', '添加文字水印')" class="btn"/>
		             	<br/>
		             	<input type="button" value="添加图片水印" onclick="showDetail('{$vo.id}', '1', '添加图片水印')" class="btn"/>
		             	<br/>
		             	<input type="button" value="删除图片" onclick="showDetail('{$vo.id}', '2', '删除图片')" class="btn"/>
		             	<div id="showDetail{$vo.id}" style="display: none;">
							<!-- 隐藏表单 -->
							<form id="imgOperator{$vo.id}" action="" method="post">
					    		<input type="hidden" name="id" value="{$vo.id}">
					    		<dl>
					    			<div class="chooseImage">
							    		<dt>请选择要操作的图片</dt>
							    		<dd>
							    		{volist name="vo.image" id="image"}
							    			<input type="checkbox" id="check-img-{$image.id}" class="check-img" name="imgId[]" value="{$image.id}">
							    			<label for="check-img-{$image.id}" class="label-img" style="background-image: url(/uploads/picture/goods/{$image.imagePath});"></label>
							    		{/volist}
							    		</dd>
						    		</div>
					    		</dl>
					    		<button class="btn" onclick="submit()">提交</button>
					    		<!-- <input type="submit" name="tijiao" /> -->
					    	</form>
					    </div>
		             </td>       
	            </tr>
	            
	        {/volist}
			{gt name="totalPage" value="1"}
                <tr>
                    <td colspan="4">{$page|showpage="$totalPage","keywords=". $Think.get.keywords . "&order=" . $Think.get.order}</td>
                </tr>
            {/gt}
        </tbody>
    </table>

    
</div>
<style type="text/css">
	.check-img{width: 0; height: 0; display: none;}
	.label-img{width: 100px; height: 100px; border: 2px solid #FFFFFF; background-size: 100px 100px; display: inline-block;}
	.check-img:checked + label{border: 2px solid #FF0000;}
</style>
{load href='__PUBLIC__/static/jquery-ui-1.12.1/jquery-ui.css'}
{load href='__PUBLIC__/static/jquery-ui-1.12.1/jquery-ui.js'}
<script type="text/javascript">
	var waterImg  = '<input type="hidden" name="method" value="2"><div class="water"><dt>请选择水印文件</dt><dd><input type="file" name="water"></dd>'
	var waterText = '<input type="hidden" name="method" value="1"><div class="water"><dt>请输入水印文字</dt><dd><input type="text" name="text"></dd>'
	var locate  = '<dt>请选择位置</dt><dd><input type="radio" name="locate" value="1">左上<input type="radio" name="locate" value="2">中上<input type="radio" name="locate" value="3">右上<input type="radio" name="locate" value="4">左中<input type="radio" name="locate" value="5">中中<input type="radio" name="locate" value="6">右中<input type="radio" name="locate" value="7">左下<input type="radio" name="locate" value="8">中下<input type="radio" name="locate" value="9">右下</dd></div>'
	// var	waterImgBtn  = '<button class="btn" onclick="submit">提交</button>'
	// var	waterTextBtn = '<button class="btn" onclick="addWaterText()">提交</button>'
	// var	delBtn       = '<button class="btn" onclick="del()">提交</button>'
	function showDetail(id,method,t){
		$("#showDetail" + id + " .water").remove()
		// $("#showDetail" + id + " .btn").remove()
		switch(method)
		{
			//添加文字水印
			case '0':
				$(".chooseImage").show()
				$("#imgOperator" + id).attr("action", "{:url('admin/image/addWatermark')}")
				$("#showDetail" + id + " dl").append(waterText + locate)
				// $("#showDetail" + id + " dl").after(waterTextBtn)
				break

			//添加图片水印
			case '1':
				$(".chooseImage").show()
				$("#imgOperator" + id).attr("action", "{:url('admin/image/addWatermark')}")
				$("#showDetail" + id + " dl").append(waterImg + locate)
				// $("#showDetail" + id + " dl").after(waterImgBtn)
				break

			//删除图片
			case '2':
				$(".chooseImage").show()
				$("#imgOperator" + id).attr("action", "{:url('admin/image/delete')}")
				// $("#showDetail" + id + " dl").after(delBtn)
				break

			//添加图片
			case '3':
				$(".chooseImage").hide()
				$("#imgOperator").action({:url('admin/image/add')})
		}
		$("#showDetail"+id).dialog({
			  height:"auto",
		      width: "auto",
		      position: {my: "center", at: "center",  collision:"fit"},
		      modal:false,//是否模式对话框
		      draggable:true,//是否允许拖拽
		      resizable:true,//是否允许拖动
		      title:t,//对话框标题
		      show:"slide",
		      hide:"explode"
		})
		
		
	}

	function search(){
		if(event.keyCode==13){
			var val=document.getElementById("search").value;
			window.location="{:url('admin/image/index')}?order={$Think.get.order}&keywords="+val;
		}
	}
	function change(val){
		window.location="{:url('admin/image/index')}?order="+val+"&keywords={$Think.get.keywords}";
	} 	
</script>


{/block}